<template>
  <el-carousel :interval="2000" type="card" height="200px" :autoplay="true">
    <el-carousel-item v-for="item in 6" :key="item">
     <div class="item">
       <div class="item-title">{{ item }}</div>
      <div class="item-description">这是第 {{ item }} 个幻灯片</div>
     </div>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>

.item-title {
  color: #475669;
  opacity: 0.75;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.item{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: 100%;
}
</style>
